<template>
  <div class style="height: 100%;padding: 10px 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts/dist/echarts";
import uuidv1 from "uuid/v1";
import dayjs from 'dayjs';
import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestdp";

export default {
  components: {},
  name: "chartreyuan",
  mixins: [defaultmixins],
  components: {},
  props: {
    pids: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
      x: 0
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
  },
  watch: {
    "$store.state.daping.manageHeatPlantzz": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
    
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图


    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(heatPlantData) {

      if (this.pids.length == 0) {
        return
      }

      var scale = this.$root.setting.scale;
      var pidArr20 = this.pids; // 晚八点到早八点
      var heatPlantInfoMap = heatPlantData["heatPlantInfoMap"];

      var basicData = heatPlantInfoMap.filter((item) => {
        if (item.pid == pidArr20[this.x]) {
          return true;
        }
      })[0];

      var hsName = basicData.name ? basicData.name : null;
      var nowHour = new Date().getHours();
      let startTime;
      let stime;
      let etime;
      var day = new Date();
      var day2 = new Date();
      let tomorrow = day2.setTime(day2.getTime()+24*60*60*1000);
      if (nowHour < 20) {
        let yestoday = day.setTime(day.getTime()-24*60*60*1000);
        startTime = dayjs(dayjs(yestoday).format('YYYY-MM-DD') + " 20:00:00").unix();
        stime = dayjs().format('YYYY-MM-DD')
        etime = dayjs().format('YYYY-MM-DD')
      } else {
        startTime = dayjs(dayjs().format('YYYY-MM-DD') + " 20:00:00").unix();
        stime = dayjs(tomorrow).format('YYYY-MM-DD');
        etime = dayjs(tomorrow).format('YYYY-MM-DD');
      }
      // 昨晚八点时间
      let params = {
        queries: [
          {
            'metric': 'pid,name,m_001t,m_002t,m_001p,m_002p,m_003q,m_003qc',
            schema: 'monitor',
          }
        ],
        table: 'heatplant',
        type: 'history',
        orderBy: "aligntime",
        search: `pid=${pidArr20[this.x]}`,
        startTime: dayjs().add(-1, 'day').unix(),
        endTime: dayjs().unix()
      }
      
      axios.post("/open/queryDb", params).then((res) => {
        let xData = res.data.map(v => v.aligntime.split(' ')[1].substr(0,5))
        // xData[0] = '20:00';
        let rlData = res.data.map(v => Number(v.m_003qc / 3.6).toFixed(2))
        
        // 查询买热量
        axios.get(`/heatPlan/totalConvertHeat?stime=${stime}&etime=${etime}&sourcePid=${pidArr20[this.x]}`).then(res2 => {
          let bugHeat = res2.data;
          let mrlData = res.data.map(v => Object.values(bugHeat)[0])
          var option = {
            title: {
              text: hsName + "(MW)",
              textStyle: {
                color: "#fff",
                fontSize: 24 * scale,
                fontWeight: "bold",
              },
            },
            tooltip: {
              trigger: "axis",
              textStyle: {
                fontWeight: "normal",
                fontSize: 30 * scale,
              },
              formatter(params) {
                var html =
                  params[0].axisValueLabel +
                  "<br>" +
                  params[0].marker +
                  params[0].seriesName +
                  " : " +
                  params[0].value +
                  "<br>" +
                  params[1].marker +
                  params[1].seriesName +
                  " : " +
                  params[1].value +
                  "<br>" +
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#D06D6A;"></span>' +
                  '差值' +
                  " : " +
                  (params[1].value - params[0].value).toFixed(2);
                  return html;
              }
            },
            grid: {
              //统计图距离边缘的距离
              bottom: "0%",
              top: "20%",
              left: "5%",
              right: "10%",
              containLabel: true,
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#F5F5F5", //x轴颜色
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: "#F5F5F5",
                    fontSize: 30 * scale,
                  },
                  showMaxLabel: true
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#F5F5F5",
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: "#F5F5F5",
                    fontSize: 30 * scale,
                  },
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                data: rlData,
                name: "热量",
                symbolSize: 0,
                type: 'line',
                smooth: true,
                lineStyle: {
                  normal: {
                    color: "#A6F4D0",
                  },
                },
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    color: "#A6F4D0", //tooltip里点的颜色
                  },
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(166,244,208,0.8)",
                        },
                        {
                          offset: 1,
                          color: "rgba(147,217,251,0.06)",
                        },
                      ],
                      false
                    ),

                    shadowColor: "rgba(53,142,215, 0.9)",
                    shadowBlur: 20,
                  },
                },
              },
              {
                data: mrlData,
                name: "买热量",
                symbolSize: 0,
                type: 'line',
                smooth: true,
                lineStyle: {
                  normal: {
                    color: "#E4E26A",
                  },
                },
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    color: "#E4E26A", //tooltip里点的颜色
                  },
                },
              }
            ],
          };
          this.myChart.setOption(option);
          this.x++;
          if (this.x == pidArr20.length) {
            this.x = 0;
          }
        })
      })
    },
  },
};
</script>
<style lang='scss' scoped>
</style>